<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Display and Video Stream</title>
  <style>
    h1 {
      text-align: center;
      color: #007BFF;
      /* 这里修改成你想要的颜色，比如蓝色 */
      font-size: 36px;
      margin-bottom: 20px;
    }

    body {
      height: 100vh;
      font-family: Arial, sans-serif;
      background: url(bg.png) no-repeat;
      background-size: cover;
    }

    .container {
      max-width: 1200px;
      height: 1000px;
      margin: 0 auto;
      padding: 20px;
    }

    .data-item {
      width: 250px;
      height: 150px;
      background-color: #fff;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      text-align: center;
    }

    input[type="text"] {
      width: 80%;
      padding: 8px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: center;
    }

    button {
      padding: 10px 20px;
      background-color: #375fe2;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #344066;
    }

    .adjust-buttons {
      justify-content: space-between;
    }

    .video-container {
      width: 640px;
      height: 480px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
      background: rgba(50, 50, 50, 0.2);
      position: relative;
      margin-left: 0px;
      float: left;
    }

    .box1 {
      width: 10px;
      height: 1800px;
      /* border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3); */
      /* backdrop-filter: blur(10px); */
      /* background: rgba(50, 50, 50, 0.2); */
      margin-bottom: 20px;
      float: left;
      margin-left: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .box2 {
      width: 200px;
      height: 180px;
      /* border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3); */
      /* backdrop-filter: blur(10px); */
      /* background: rgba(50, 50, 50, 0.2); */
      margin-bottom: 20px;
      float: left;
      margin-left: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .box5 {
      width: 250px;
      height: 230px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
      background: rgba(50, 50, 50, 0.2);
      margin-bottom: 20px;
      float: left;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

    }

    .box3 {
      width: 250px;
      height: 180px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
      background: rgba(50, 50, 50, 0.2);
      margin-bottom: 20px;
      float: left;
      margin-left: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

    }

    .box4 {
      width: 130px;
      height: 180px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
      background: rgba(50, 50, 50, 0.2);
      margin-bottom: 20px;
      float: left;
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

    }

    /* .box {
            width: 250px;
            height: 230px;
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            border-left: 1px solid rgba(255, 255, 255, 0.5);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            border-right: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            background: rgba(50, 50, 50, 0.2);
            margin-bottom: 20px;
            float: left;
            margin-left: 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        } */


    /* .video-container video {
      width: 100%;
      height: auto;
      border-radius: 6px;
    } */
  </style>
</head>

<body>
  <h1>汽车发动机检测实验室</h1>
  <div class="container">
    <!-- 视频流容器 -->
    <div class="video-container">
      <img src=".?action=stream" alt="加载中..." id="videoStream">
  </div>
    <!-- 温度 -->
    <div class="box5">
      <label for="Temp" style="color: rgb(38, 0, 255); font-size: 24px;">实验室温度</label>
      <input type="text" id="Temp">
      <div class="adjust-buttons">
        <button id="tempIncreaseBtn">阈值 up</button>
        <input type="text" value="35" readonly style="width: 50px; margin: 5px;">
        <button id="tempDecreaseBtn">阈值 down</button>
        <input type="text" value="15" readonly style="width: 50px; margin: 5px;">
      </div>
    </div>

    <!-- 环境湿度 -->
    <div class="box5">
      <label for="Hum" style="color: rgb(38, 0, 255); font-size: 24px;">实验室湿度</label>
      <input type="text" id="Hum">
      <div class="adjust-buttons">
        <button id="humIncreaseBtn">阈值 up</button>
        <input type="text" value="50" readonly style="width: 50px; margin: 5px;">
        <button id="humDecreaseBtn">阈值 down</button>
        <input type="text" value="20" readonly style="width: 50px; margin: 5px;">
      </div>
    </div>



    <!-- LED2 状态/发动机启停状态 -->
    <div class="box5">
      <label for="Led2" style="color: rgb(38, 0, 255); font-size: 24px;">发动机工作状态</label>
      <input type="text" id="Led2">
      <div class="adjust-buttons">
        <button id="led2OnBtn">开</button>
        <button id="led2OffBtn">关</button>
      </div>
    </div>


    <!-- 电子钥匙状态--急停按钮/灯 3 状态 -->
    <div class="box5">
      <label for="Ekey" style="color: rgb(38, 0, 255); font-size: 24px;">发动机急停按钮</label>
      <input type="text" id="Ekey">
      <div class="adjust-buttons">
        <button id="ekeyOnBtn">开</button>
        <button id="ekeyOffBtn">关</button>
      </div>
    </div>


    <!-- 风扇状态 -->
    <div class="box3">
      <label for="Fan" style="color: rgb(38, 0, 255); font-size: 24px;">排风扇</label>
      <input type="text" id="Fan">
      <div class="adjust-buttons">
        <button id="fanOnBtn">开</button>
        <button id="fanOffBtn">关</button>
      </div>
    </div>

    <!-- 转速 -->
    <div class="box3">
      <label for="Revolution" style="color: rgb(38, 0, 255); font-size: 24px;">发动机转速</label>
      <input type="text" id="Revolution">
      <div class="adjust-buttons">
        <button id="revolutionIncreaseBtn">增加</button>
        <button id="revolutionDecreaseBtn">减少</button>
      </div>
    </div>


    <!-- 主门状态/modbus 模拟 -->
    <div class="box3">
      <label for="Mdoor" style="color: rgb(38, 0, 255); font-size: 24px;">Mdoor</label>
      <input type="text" id="Mdoor">
      <div class="adjust-buttons">
        <button id="mdoorOpenBtn">开</button>
        <button id="mdoorCloseBtn">关</button>
      </div>
    </div>

    <!-- LED1 状态/和门一样 -->
    <div class="box3">
      <label for="Led1" style="color: rgb(38, 0, 255); font-size: 24px;">实验室工作状态</label>
      <input type="text" id="Led1">
      <div class="adjust-buttons">
        <!-- <button id="led1OnBtn">开</button>
          <button id="led1OffBtn">关</button> -->
      </div>
    </div>
    <!-- 获取数据按钮 -->
    <div class="box4">
      <button id="refreshBtn" style="color: rgb(38, 0, 255); font-size: 24px;">Start</button>
    </div>

    <!-- 获取数据按钮
        <div class="data-item">
          <button id="refreshBtn">获取数据</button>
        </div> -->


    <div class="box2">

    </div>

    <!-- 发动机温度 -->
    <div class="box3">
      <label for="Etemp" style="color: rgb(38, 0, 255); font-size: 24px;">发动机温度</label>
      <input type="text" id="Etemp">
    </div>

    <!-- 碳含量 -->
    <div class="box3">
      <label for="Carbon" style="color: rgb(38, 0, 255); font-size: 24px;">排放尾气浓度</label>
      <input type="text" id="Carbon">
    </div>

    <!-- 门状态/光电开关 -->
    <div class="box3">
      <label for="Door" style="color: rgb(38, 0, 255); font-size: 24px;">Door:</label>
      <input type="text" id="Door">
    </div>



    <!-- 碳含量
    <div class="data-item">
      <label for="Carbon">Carbon:</label>
      <input type="text" id="Carbon">
    </div> -->









  </div>
  <script>
    // 获取视频流
    function fetchVideoStream() {
      const videoStream = document.getElementById('videoStream');
      videoStream.src = 'http://192.168.0.165:8080/?action=stream';
    }
    // 连接服务器，接收数据
    document.getElementById("refreshBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      fetchVideoStream();
      xhr.send("updata");
    });

    // 温度增加按钮
    document.getElementById("tempIncreaseBtn").addEventListener("click", function () {
      // 实现温度增加逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Temp').value = data[0];
      //   }
      // };
      xhr.send("upTemp");
    });

    //温度增加更新数据响应
    document.getElementById("tempIncreaseBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 温度减少按钮
    document.getElementById("tempDecreaseBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Temp').value = data[0];
      //   }
      // };
      xhr.send("downTemp");
    });

    //温度减少更新数据响应
    document.getElementById("tempDecreaseBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });

    // 湿度增加按钮
    document.getElementById("humIncreaseBtn").addEventListener("click", function () {
      // 实现湿度增加逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Hum').value = data[6];
      //   }
      // };
      xhr.send("upHum");
    });

    //湿度增加更新数据响应
    document.getElementById("humIncreaseBtn").addEventListener("click", function () {
      // 实现湿度增加逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 湿度减少按钮
    document.getElementById("humDecreaseBtn").addEventListener("click", function () {
      // 实现湿度减少逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Hum').value = data[6];
      //   }
      // };
      xhr.send("downHum");
    });

    //湿度减少更新数据响应
    document.getElementById("humDecreaseBtn").addEventListener("click", function () {
      // 实现湿度减少逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 转速增加按钮
    document.getElementById("revolutionIncreaseBtn").addEventListener("click", function () {
      // 实现转速增加逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');

      xhr.send("upRevolution");
    });

    //转速增加更新数据响应
    document.getElementById("revolutionIncreaseBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 转速减少按钮
    document.getElementById("revolutionDecreaseBtn").addEventListener("click", function () {
      // 实现转速减少逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Revolution').value = data[8];
      //   }
      // };
      xhr.send("downRevolution");
    });

    //转速减少更新数据响应
    document.getElementById("revolutionDecreaseBtn").addEventListener("click", function () {
      // 实现转速减少逻辑
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // LED1 开按钮
    // document.getElementById("led1OnBtn").addEventListener("click", function () {
    //   var xhr = new XMLHttpRequest();
    //   var url = "";
    //   xhr.open("post", url, true);
    //   // xhr.onreadystatechange = function () {
    //   //   if (xhr.readyState === 4 && xhr.status === 200) {
    //   //     var response = xhr.responseText;
    //   //     const data = response.split('/');
    //   //     document.getElementById('Led1').value = data[2];
    //   //   }
    //   // };
    //   xhr.send("onLed1");
    // });

    // LED1 开按钮更新数据响应
    // document.getElementById("led1OnBtn").addEventListener("click", function () {
    //   var xhr = new XMLHttpRequest();
    //   var url = "";
    //   xhr.open("post", url, true);
    //   xhr.onreadystatechange = function () {
    //     if (xhr.readyState === 4 && xhr.status === 200) {
    //       var response = xhr.responseText;
    //       const data = response.split('/');
    //       document.getElementById('Temp').value = data[0];
    //       document.getElementById('Door').value = data[1];
    //       document.getElementById('Led1').value = data[2];
    //       document.getElementById('Led2').value = data[3];
    //       document.getElementById('Fan').value = data[4];
    //       document.getElementById('Ekey').value = data[5];
    //       document.getElementById('Hum').value = data[6];
    //       document.getElementById('Etemp').value = data[7];
    //       document.getElementById('Revolution').value = data[8];
    //       document.getElementById('Carbon').value = data[9];
    //       document.getElementById('Mdoor').value = data[10];
    //     }
    //   };
    //   xhr.send("updata");
    // }
    // );



    // // LED1 关按钮
    // document.getElementById("led1OffBtn").addEventListener("click", function () {
    //   var xhr = new XMLHttpRequest();
    //   var url = "";
    //   xhr.open("post", url, true);
    //   // xhr.onreadystatechange = function () {
    //   //   if (xhr.readyState === 4 && xhr.status === 200) {
    //   //     var response = xhr.responseText;
    //   //     const data = response.split('/');
    //   //     document.getElementById('Led1').value = data[2];
    //   //   }
    //   // };
    //   xhr.send("offLed1");
    // }
    // );

    // // LED1 关按钮更新数据响应
    // document.getElementById("led1OffBtn").addEventListener("click", function () {
    //   var xhr = new XMLHttpRequest();
    //   var url = "";
    //   xhr.open("post", url, true);
    //   xhr.onreadystatechange = function () {
    //     if (xhr.readyState === 4 && xhr.status === 200) {
    //       var response = xhr.responseText;
    //       const data = response.split('/');
    //       document.getElementById('Temp').value = data[0];
    //       document.getElementById('Door').value = data[1];
    //       document.getElementById('Led1').value = data[2];
    //       document.getElementById('Led2').value = data[3];
    //       document.getElementById('Fan').value = data[4];
    //       document.getElementById('Ekey').value = data[5];
    //       document.getElementById('Hum').value = data[6];
    //       document.getElementById('Etemp').value = data[7];
    //       document.getElementById('Revolution').value = data[8];
    //       document.getElementById('Carbon').value = data[9];
    //       document.getElementById('Mdoor').value = data[10];
    //     }
    //   };
    //   xhr.send("updata");
    // }
    // );



    // LED2 开按钮--发动机状态
    document.getElementById("led2OnBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Led2').value = data[3];
      //   }
      // };
      xhr.send("onLed2");
    });

    // LED2 开按钮更新数据响应
    document.getElementById("led2OnBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // LED2 关按钮
    document.getElementById("led2OffBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Led2').value = data[3];
      //   }
      // };
      xhr.send("offLed2");
    });

    // LED2 关按钮更新数据响应
    document.getElementById("led2OffBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 风扇开按钮
    document.getElementById("fanOnBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Fan').value = data[4];
      //   }
      // };
      xhr.send("onFan");
    });

    // 风扇开按钮更新数据响应
    document.getElementById("fanOnBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 风扇关按钮
    document.getElementById("fanOffBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Fan').value = data[4];
      //   }
      // };
      xhr.send("offFan");
    });

    // 风扇关按钮更新数据响应
    document.getElementById("fanOffBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 电子钥匙开按钮--灯三模拟,急停按键状态
    document.getElementById("ekeyOnBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Ekey').value = data[5];
      //   }
      // };
      xhr.send("onEkey");
    });

    // 电子钥匙开按钮更新数据响应
    document.getElementById("ekeyOnBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 电子钥匙关按钮
    document.getElementById("ekeyOffBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Ekey').value = data[5];
      //   }
      // };
      xhr.send("offEkey");
    });

    // 电子钥匙关按钮更新数据响应
    document.getElementById("ekeyOffBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 主门开按钮--modbus门
    document.getElementById("mdoorOpenBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Mdoor').value = data[10];
      //   }
      // };
      xhr.send("onMdoor");
    });

    // 主门关按钮更新数据响应
    document.getElementById("mdoorOpenBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });


    // 主门关按钮
    document.getElementById("mdoorCloseBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     var response = xhr.responseText;
      //     const data = response.split('/');
      //     document.getElementById('Mdoor').value = data[10];
      //   }
      // };
      xhr.send("offMdoor");
    });

    // 主门关按钮更新数据响应
    document.getElementById("mdoorCloseBtn").addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      var url = "";
      xhr.open("post", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          const data = response.split('/');
          document.getElementById('Temp').value = data[0];
          document.getElementById('Door').value = data[1];
          document.getElementById('Led1').value = data[2];
          document.getElementById('Led2').value = data[3];
          document.getElementById('Fan').value = data[4];
          document.getElementById('Ekey').value = data[5];
          document.getElementById('Hum').value = data[6];
          document.getElementById('Etemp').value = data[7];
          document.getElementById('Revolution').value = data[8];
          document.getElementById('Carbon').value = data[9];
          document.getElementById('Mdoor').value = data[10];
        }
      };
      xhr.send("updata");
    });

  </script>
</body>

</html>